import {
  Swiper,
  SwiperItem,
  View,
  Image,
  Text,
  Input,
} from "@tarojs/components";
import { FC } from "@tarojs/taro";
import { HIcon } from "@/components";
import classNames from "classnames";
import styles from "./index.module.less";
import { BannerObj } from "../../type";

interface Props {
  list: BannerObj[];
}

const Banner: FC<Props> = ({ list }) => {
  return (
    <View className={styles["banner-wrapper"]}>
      <Swiper
        indicatorDots={true}
        circular={true}
        indicatorColor={"rgba(255,255,255,0.6)"}
        indicatorActiveColor={"rgba(255,255,255,1)"}
        className={styles["banner-content"]}
      >
        {list.map((item) => (
          <SwiperItem className={styles["banner-item"]}>
            <Image
              className={styles["img"]}
              mode="widthFix"
              src={item.imgUrl}
            ></Image>
          </SwiperItem>
        ))}
      </Swiper>
      {/* <View className={styles["search-wrapper"]}>
        <View className={styles["search-content"]}>
          <Text
            className={classNames(styles["icon"], "iconfont-sousuo")}
          ></Text>
          <HIcon className={styles["icon"]} type={"sousuo"} color={"#fff"} />
          <Input
            type="text"
            className={styles["input"]}
            placeholder="搜索会员编号"
            placeholderClass={styles["place"]}
          />
          <View className={styles["btn"]}>搜索</View>
        </View>
      </View> */}
    </View>
  );
};

export default Banner;
